<template>
    <div class="enterpriseAuth_page">
        <van-nav-bar title="企业认证" left-arrow @click-left="$router.push('/mine')" />

        <van-notice-bar :mode="allUserInfo.certification_state === 2 ? 'closeable' : 'link'" left-icon="volume-o"
            wrapable :scrollable="false" @click="isToPersonalAuth"
            v-show="allUserInfo.company_certification_state === 0">
            {{needNotice}}
        </van-notice-bar>

        <van-notice-bar left-icon="volume-o" wrapable :scrollable="false"
            v-show="allUserInfo.company_certification_state != 0">
            {{ '当前状态为：' + (allUserInfo.company_certification_state === 3 ? allUserInfo.company_certification_state_msg : auditState[allUserInfo.company_certification_state])}}
        </van-notice-bar>

        <com-enterprise-auth @getEnterpriseAuthValue="toAddOrUpdate" :enterpriseObj="enterpriseObj">
        </com-enterprise-auth>

        <van-overlay :show="privacyPwdOverlayShow" :lock-scroll="true">
            <div class="overlay-wrapper">
                <div class="overlay-block">
                    <van-form class="pwd-form" ref="pwdForm">
                        <div class="title">请输入隐私密码</div>
                        <van-field autocomplete="off" v-model="privacyPwd" style="text-align:center;" placeholder="请输入隐私密码"
                            :rules="[{required: true,message: ''}]" />
                        <div style="text-align: center; margin-top: .5rem;">
                            <van-button style="margin:10px;width:65px;" size="small" type="info"
                                @click="privacyPwdVerify()">确认
                            </van-button>
                            <van-button style="margin:10px;width:65px;" size="small" @click="cancelVerify()">取消
                            </van-button>
                        </div>
                    </van-form>
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import {Toast} from 'vant';
import comEnterpriseAuth from '../../components/comEnterpriseAuth'
import {mapGetters} from 'vuex'
import auditState from '../../constants/auditState'

export default {
  name: 'enterpriseAuth',
  components: {
    comEnterpriseAuth
  },

  data() {
    return {
      auditState,
      enterpriseObj: {},

      privacyPwd: '', // 隐私密码
      privacyPwdOverlayShow: true, // 隐私密码校验遮罩
      hasPrivacyPwd: false // 是否设置了隐私密码
    }
  },
  created() {
    // 只有这两种情况讨论： 0、未认证;  1、认证中;  2、认证成功; 3 驳回（认证失败）
    // if (this.allUserInfo.company_certification_state != 0) {
    //   // 只有提交过认证后, 才请求企业认证详细信息
    //   this._getEnterpriseAuditInfo()
    //   this.$store.dispatch('getUserAllInfo')
    // }

    this.getHasPrivacyPwd()
    // 遮罩层打开时禁止滚动页面
    // document.body.addEventListener('touchmove', this.bodyScroll, {passive: false})
    // document.body.addEventListener('wheel', this.bodyScroll, {passive: false})
  },

  computed: {
    ...mapGetters(['allUserInfo']),

    needNotice() {
      // 个人认证的提示
      switch (this.allUserInfo.certification_state) {
        case 0:
          return '企业认证前， 必须先进行个人认证。您还没有个人认证， 点我去认证！'
        case 1:
          return '个人认证审核通过后，才能企业认证。点我去查看审核结果！'
        case 2:
          return '个人认证已审核通过，请企业认证吧！'
        case 3:
          return '个人认证失败，点我去修改'
        default:
          return '个人认证异常，请联系管理员！！！'
      }
    }
  },
  methods: {
    async _getEnterpriseAuditInfo() {
      const res = await this.$api.authentication.reqEnterpriseAuditInfo()
      if (res.code === 200) {
        this.enterpriseObj = res.data
      }
    },

    isToPersonalAuth() {
      // 认证不通过均跳转到个人认证页面
      if (this.allUserInfo.certification_state != 2) {
        this.$router.push('/personalAuth')
      }
    },

    async toAddOrUpdate(obj) {
      const res = await this.$api.authentication.reqEnterpriseAuth(obj)
      if (res.code === 200) {
        Toast(res.data)
        await this.$router.push('/mine')
        await this.$store.dispatch('getUserAllInfo')
      }
    },
    cancelVerify() {
      // 取消隐私密码校验的话回退到上一页
      this.$router.go(-1)
    },

    privacyPwdVerify() {
      this.$refs['pwdForm']
        .validate()
        .then(() => {
          let params = {
            privacypwd: this.privacyPwd
          }

          // TODO: ajax 查看隐私密码
          this.$api.user.privacyCheck(params).then(res => {
            if (res.code === 200 && res.data == 'true') {
              // 隐私密码正确
              this.privacyPwdOverlayShow = false
              if (this.allUserInfo.company_certification_state != 0) {
                // 只有提交过认证后, 才请求企业认证详细信息
                this._getEnterpriseAuditInfo()
                this.$store.dispatch('getUserAllInfo')
              }
              // document.body.removeEventListener('touchmove', this.bodyScroll, {passive: false})
              // document.body.removeEventListener('wheel', this.bodyScroll, {passive: false})
            } else {
              Toast('隐私密码错误！')
            }
          })
        })
        .catch(e => {
          console.log(e)
        })
    },

    bodyScroll(event) {
      event.preventDefault()
    },

    // 是否设置了隐私密码
    async getHasPrivacyPwd() {
      const res = await this.$api.user.hasPrivacyPwd()
      if (res.code === 200) {
        this.hasPrivacyPwd = res.data
        if (this.hasPrivacyPwd == 'false') {
          // 未设置隐私密码
          this.$router.push({name: 'privacyPwd', params: {type: 4}})
        }
      }
    }
  },
  destroyed() {
    // 解绑禁止页面滚动事件
    // document.body.removeEventListener('touchmove', this.bodyScroll, {passive: false})
    // document.body.removeEventListener('wheel', this.bodyScroll, {passive: false})
  }
}
</script>

<style scoped>
.overlay-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.overlay-block {
  display: table;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.overlay-block .title {
  margin: 0.5rem auto;
  color: #323233;
  font-weight: 500;
  font-size: 0.42667rem;
}

.overlay-block .pwd-form {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding: 0 8%;
}
</style>
